<div id="box-faq">
    <div class="faq-title">
        <img src="<?php echo $img_url; ?>style/images/img7.gif" class="bullet"  alt="" border="0"/> 
        <span class="title"><?php echo $page_faq; ?></span>
        <a href="hoi-dap" class="more"><?php echo $page_more; ?>&nbsp;<img src="<?php echo $img_url; ?>style/images/img3.png" alt="" border="0"/></a>
    </div>
    <div id="faq-body">   
        <?php
        //Phải đủ 9 record thì mới show box FAQ (để đảm bảo layout show tốt)
        if (isset($aFAQ) && count($aFAQ) >= 9) {
            ?>	      
            <div class="nav-menu" style="display:inline-block; position:absolute;">
                <div class="ui-box-tootle">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tbody>
                            <tr>
                                <td class="middle-menu-drop">
                                    <ul id="menu-dorpdown" class="sub-vertmenu">
                                        <?php
                                        $i = 1;
                                        foreach ($aFAQ as $key => $item):
                                            $item->question = trim(strip_tags($item->question));
                                            $question = $item->question;
                                            if ( mb_strlen( $question, 'utf8' ) > 55 ) {
                                                $last_space = strrpos( substr( $question, 0, 55 ), ' ' ); // find the last space within 35 characters
                                                $question = substr( $question, 0, $last_space ) . '...';
                                            }
                                            
                                            if ($i != 1) {                                                
                                                ?> 
                                                <li data-submenu-id="faq-data<?php echo $i; ?>"> <a class="sub" href="javascript:void(0);" title="<?php echo $item->question; ?>"><span class="sprites ui-fashion"></span> <i style="display: none;" class="sprites ui-arrow-r"></i><?php echo $question; ?></a>
                                                    <div id="faq-data<?php echo $i; ?>" class="sub-menubox">
                                                        <div class="ui-sprite-sub-menu top-sub-block-menu"></div>
                                                        <div class="ui-sprite-sub-menu middle-sub-block-menu">
                                                            <div class="ct-sub" id="faq_<?php echo $i; ?>"> 
                                                                <?php echo str_replace('14px', '13px', $item->answer); ?>
                                                            </div>
                                                        </div>
                                                        <div class="ui-sprite-sub-menu bottom-sub-block-menu"></div>
                                                    </div>
                                                </li>     
                                                <?php
                                            } else {
                                                ?>   
                                                <li data-submenu-id="faq-data<?php echo $i; ?>"> <a id="lk_faq_1" class="sub hover" href="javascript:void(0);" title="<?php echo $item->question; ?>"><span class="sprites ui-fashion"></span> <i style="display: inline;" class="sprites ui-arrow-r"></i><?php echo $question; ?></a>
                                                    <div id="faq-data<?php echo $i; ?>" class="sub-menubox">
                                                        <div class="ui-sprite-sub-menu top-sub-block-menu"></div>
                                                        <div class="ui-sprite-sub-menu middle-sub-block-menu">
                                                            <div class="ct-sub" id="faq_1"> 
                                                                <?php echo str_replace('14px', '13px', $item->answer); ?>
                                                            </div>
                                                        </div>
                                                        <div class="ui-sprite-sub-menu bottom-sub-block-menu"></div>
                                                    </div>
                                                </li>                                
                                                <?php
                                            }
                                            $i++;
                                        endforeach;
                                        ?>    
                                    </ul></td>
                                <td class="right-menu-drop">&nbsp;</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <?php //xử lý FAQ hover ?>
            <script src="<?php echo $img_url; ?>style/js/FE/common_lib.js"></script>	
            <script src="<?php echo $img_url; ?>style/js/FE/navigation.js"></script>
            <link href="<?php echo $img_url; ?>style/css/navigation.css" rel="stylesheet">      
            <?php
        } else {
            ?>             
            <div align='center' class='nodata'><?php echo $page_nodata; ?></div>
            <?php
        }
        ?>
    </div>
</div>
<style>
    .content{margin:0; width:96%; height:520px; padding:4px; overflow:auto; background:#FFF;}
    .content p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px;}
    .content p:nth-child(3n+0){color:#c96;}
		
    .content_adv{margin:0; width:97%; height:160px; padding:4px; overflow:auto; background:#FFF;}
    .content_adv p:nth-child(even){color:#999; font-family:Georgia,serif; font-size:17px;}
    .content_adv p:nth-child(3n+0){color:#c96;}		
</style>
<link href="<?php echo $img_url; ?>style/css/jquery.mCustomScrollbar.css" rel="stylesheet" />
<!-- scroll box -->
<script src="<?php echo $img_url; ?>style/js/FE/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
    (function($) {
        $(window).load(function() {
            $("#noibat-content").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                },
                callbacks: {
                    onScrollStart: function() {
                        OnScrollStart();
                    },
                    onScroll: function() {
                        OnScroll();
                    },
                    onTotalScroll: function() {
                        OnTotalScroll();
                    },
                    onTotalScrollBack: function() {
                        OnTotalScrollBack();
                    },
                    onTotalScrollOffset: 140,
                    onTotalScrollBackOffset: 120,
                    whileScrolling: function() {
                        WhileScrolling();
                    }
                }
            });
            $("#faq_1").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                }
            });
            $("#faq_2").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                }
            });
            $("#faq_3").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                }
            });
            $("#faq_4").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                }
            });
            $("#faq_5").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                }
            });
            $("#faq_6").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                }
            });
            $("#faq_7").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                }
            });
            $("#faq_8").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                }
            });
            $("#faq_9").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                }
            });
            function OnScrollStart() {
                $(".output .onScrollStart").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
            }
            function OnScroll() {
                $(".output .onScroll").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
            }
            function OnTotalScroll() {
                $(".output .onTotalScroll").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
            }
            function OnTotalScrollBack() {
                $(".output .onTotalScrollBack").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
            }
            function WhileScrolling() {
                $(".output .whileScrolling").stop(true, true).css("display", "inline-block").fadeOut(500);
                $(".info .content-position").text(mcs.top);
                $(".info .dragger-position").text(mcs.draggerTop);
                $(".info .scroll-pct").text(mcs.topPct + "%");
            }
            $(".total-scroll-offset").text($("#content_1").data("onTotalScroll_Offset"));
            $(".total-scroll-back-offset").text($("#content_1").data("onTotalScrollBack_Offset"));
            $(".output a").click(function(e) {
                e.preventDefault();
                var $this = $(this),
                        rel = $this.attr("rel"),
                        target = $this.parent().find("." + rel);
                target.add($this).toggleClass("hidden");
            });
						////////////////////////////////////////////
            $("#adv-content").mCustomScrollbar({
                scrollButtons: {
                    enable: true
                },
                callbacks: {
                    onScrollStart: function() {
                        OnScrollStart_adv();
                    },
                    onScroll: function() {
                        OnScroll_adv();
                    },
                    onTotalScroll: function() {
                        OnTotalScroll_adv();
                    },
                    onTotalScrollBack: function() {
                        OnTotalScrollBack_adv();
                    },
                    onTotalScrollOffset: 140,
                    onTotalScrollBackOffset: 120,
                    whileScrolling: function() {
                        WhileScrolling_adv();
                    }
                }
            });

            function OnScrollStart_adv() {
                $(".output .onScrollStart").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
            }
            function OnScroll_adv() {
                $(".output .onScroll").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
            }
            function OnTotalScroll_adv() {
                $(".output .onTotalScroll").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
            }
            function OnTotalScrollBack_adv() {
                $(".output .onTotalScrollBack").stop(true, true).css("display", "inline-block").delay(500).fadeOut(500);
            }
            function WhileScrolling_adv() {
                $(".output .whileScrolling").stop(true, true).css("display", "inline-block").fadeOut(500);
                $(".info .content-position").text(mcs.top);
                $(".info .dragger-position").text(mcs.draggerTop);
                $(".info .scroll-pct").text(mcs.topPct + "%");
            }
            $(".total-scroll-offset").text($("#content_1").data("onTotalScroll_Offset"));
            $(".total-scroll-back-offset").text($("#content_1").data("onTotalScrollBack_Offset"));
            $(".output a").click(function(e) {
                e.preventDefault();
                var $this = $(this),
                        rel = $this.attr("rel"),
                        target = $this.parent().find("." + rel);
                target.add($this).toggleClass("hidden");
            });						
        });
    })(jQuery);
</script>    